<template>
  <el-card class="box-card table">
    <template #header>
      <div class="card-header">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>角色权限</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <router-link :to="{ path: '/auth/menu/add' }">
          <el-button
            class="button"
            type="success"
            icon="el-icon-circle-plus"
            size="small"
            >新增权限</el-button
          >
        </router-link>
      </div>
    </template>
    <div class="table">
      <el-tree
        v-if="current_node_key"
        :data="dataTree"
        show-checkbox
        :default-expand-all="true"
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :check-strictly="false"
        :default-checked-keys="current_node_key"
      >
      </el-tree>
      <!-- 
      <div class="buttons">
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      </div> -->
      <div class="buttons">
        <el-row>
          <el-button type="success" size="small" class="button" @click="save()"
            >保存</el-button>
        </el-row>
        <el-row>
          <router-link :to="{ path: '/auth/role/list' }">
            <el-button
              class="button"
              type="success"
              icon="el-icon-back"
              size="small"
              >返回</el-button
            >
          </router-link>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
import { menuListTree, getMenuByRole,saveRoleMenu } from "@/api/index.js";
export default {
  name: "MenuRole",
  data() {
    return {
      dataTree: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      current_node_key: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async save() {
      var param={};
      param.id=this.$route.query.id;
      param.menu=this.$refs.tree.getCheckedKeys()
      var that=this
      await saveRoleMenu(param)
      .then(function(res){
          if(res.code==1){
			  that.$message.success('保存成功')
			  that.$router.push("/auth/role/list")
          }
      }).catch();
      console.log(this.$refs.tree.getCheckedKeys());
    },
    async getList() {
      var that = this;
      await menuListTree()
        .then(function (res) {
          if (res.code == 1) {
            console.log(res);
            that.dataTree = res.data;
          }
        })
        .catch();
      await getMenuByRole({ id: this.$route.query.id })
        .then(function (res) {
          if (res.code == 1) {
            that.current_node_key = res.data;
          }
        })
        .catch();
    },
  },
};
</script>
<style scoped>
.buttons .button{
  text-align: center;
  margin: 0 auto;
  height: 30px;
}
</style>
